<template>
  <div class="category">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="栏目管理"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <!-- 2.0 已关注的栏目 -->
    <div class="group follow">
      <h3 class="title">已关注栏目</h3>
      <p class="desc">点击删除以下频道</p>
      <div class="list">
          <span 
            v-for="item in followList"
      :key="item.id"
          class="item"
          @click="removeFn(item)"
          >{{item.name}}</span>
       
      </div>
    </div>

    <div class="group unfollow">
      <h3 class="title">未关注栏目</h3>
      <p class="desc">点击添加以下频道</p>
      <div class="list"
    
      
      >
      <span
      v-for="item in unfollow"
      :key="item.id"
      class="item"
      @click="addFn(item)"
      >{{item.name}}</span>
       
      </div>
    </div>
  </div>
</template>

<script>
import {getCategoryAPI} from '../apis/category'
import { 
 getCate,
  getToken,
  getunCate,
  setCate,
  setUnCate,

} from '../utils/localData';
export default {
    data () {
        return {
            //已关注的栏目
            followList:getCate(),
            //为关注的栏目
            unfollow:getunCate(),
        }
    },
   async created() {
    // 如果本地存储两个数组都为空，表示从未请求过数据，需要发送请求获取栏目数据
    if (this.followList.length === 0 && this.unfollow.length === 0) {
      const res = await getCategoryAPI();
      // console.log(res.data.data);
      // 如果已登录，需要删除掉前两项(关注和头条)
      if (getToken()) {
        // .splice()   可以用于删除数组的数据，改变原数组
        // 💥 注意：.splice() 的返回值是 被删除的元素。
        res.data.data.splice(0, 2);
      } else {
        // 如果未登录，需要删除掉前一项(头条)
        res.data.data.splice(0, 1);
      }
      // console.log(res.data.data);
      // 把操作后的数组存储起来，用于页面渲染
      this.followList = res.data.data;
    }
  },
    methods: {
        //item（实参） 把值给 theItem（形参）
        removeFn(theItem){
            if(this.followList.length===1)
            return this.$toast.fail('至少保留一个栏目')

            
console.log(theItem);
//移除已关注的
    this.followList= this.followList.filter((item)=>item.id !==theItem.id)
    //添加到未关注的
    this.unfollow.unshift(theItem)
        },
        addFn(theItem){
this.unfollow=this.unfollow.filter((item)=>item.id !==theItem.id)
this.followList.unshift(theItem)

        }
    },
    //侦听数据
    watch: {
        //然后存到封装好的本地去
        followList(){
            //存储
            setCate(this.followList)
            //// 1. 存储 cate
            setUnCate(this.unfollow)
        }
    }
};
</script>

<style lang="less" scoped>
.group {
  padding: 10px;
  .title {
    font-size: 15px;
    margin: 10px 0;
  }

  .desc {
    font-size: 12px;
    color: #999;
    margin: 5px 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 35px;
      width: 23%;
      margin: 1%;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      position: relative;
      &::after {
        position: absolute;
        right: 5px;
        top: 0px;
      }
    }
  }
}
.follow .list .item::after {
  content: "-";
}
.unfollow .list .item::after {
  content: "+";
}
</style>